<template>
  <view class="ver-layout">
    <!--  最上面的布局  -->
    <view class="top-layout hor-layout-side">
      <view class="hor-layout">
        <ali-icon class="user-icon" size="60" font="icon-userIcon"></ali-icon>
        <view class="user-info ver-layout">
          <view class="hor-layout-center" style="margin-top: 5px">
            <view style="margin-right: 10px;color: white">8736823</view>
            <ali-icon size="18" font="icon-ccedit"></ali-icon>
          </view>
          <view class="user-birthday">2023-01-03</view>
        </view>
      </view>
      <view class="hor-layout-center sign-layout">
        <ali-icon size="30" font="icon-Sign" color="white"></ali-icon>
        <view class="ver-layout" style="font-weight: lighter;font-size: small;color: white">
          <view style="margin: 0px 5px">
            连签
            <text style="color:#00ffbc">20天</text>
          </view>
        </view>
        <u-icon name="arrow-right" color="white"></u-icon>
      </view>
    </view>
    <!--  底部列表  -->
    <view class="ver-layout-center bottom-layout">
      <view v-for="(item,index) in actionList" :key="index" @click="toPage(item)"
            class="action-item hor-layout-side-center">
        <view class="hor-layout-center">
          <ali-icon size="23" :font="item.icon" color="#55BBB3"></ali-icon>
          <view class="name">{{ item.name }}</view>
        </view>
        <u-icon size="20" name="arrow-right" color="#999999"></u-icon>
      </view>
      <view class="logout-btn">
        <u-button type="primary" text="Log out"></u-button>
      </view>
      <view class="version-text">
        Giftcard8 V1.9.4
      </view>
    </view>
  </view>
</template>

<script>
import router from "@/router"

export default {
  name: "mine",
  data() {
    return {
      actionList: [
        {
          name: 'Invitation for rewards',
          icon: 'icon-adduser',
          url: router.inviteFriend
        }, {
          name: 'Redeem VIP points',
          icon: 'icon-VIP',
          url: router.vipPoints
        }, {
          name: 'Share App',
          icon: 'icon-share',
        }, {
          name: 'Sell gift card history',
          icon: 'icon-lishijilu',
          url: router.cardHistory
        }, {
          name: 'Bind Bank',
          icon: 'icon-yinhangka',
          url: router.bindBank
        }, {
          name: 'Setting',
          icon: 'icon-setting',
          url: router.setting
        }, {
          name: 'Q&A',
          icon: 'icon-wenti',
          url: ''
        }, {
          name: 'Chat with us',
          icon: 'icon-kefu',
          url: ''
        }
      ]
    }
  },
  methods: {
    toPage(item) {
      if ('url' in item) {
        if (item.url) this.$tools.pageGo(item.url)
        else this.$tools.showToast("路由未配置")
      } else {
        if (item.icon == 'icon-share') {
          uni.shareWithSystem({
            type: "text",
            summary: 'Get the best gift card transaction app at this link. You\'ll love it. https://wap.giftcard8.com/',
            success(res) {
              console.log("shareWithSystem", res)
            },
            fail(err) {
              console.error("shareWithSystem", err)
            }
          })
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
page {
  background: #f7f7f7;
}

.top-layout {
  width: 100%;
  padding-top: 54px;
  padding-bottom: 40px;
  background: #55BBB3;

  .user-icon {
    margin-left: 10px;
  }

  .user-info {
    margin-left: 10px;
    font-size: medium;
    font-weight: bold;

    .user-birthday {
      color: whitesmoke;
      font-weight: lighter;
      font-size: small;
      margin-top: 10px;
    }
  }
}

.grade-layout {
  width: calc(100% - 20px);
  margin: 10px;
  border-radius: 10px;
  background: #55BBB3;
  color: white;

  .grade-top {
    margin: 10px;
  }

  .grade-bottom {
    margin: 10px;

    .hint {
      flex: 1;
      font-size: smaller;
    }

    .calendar {
      margin-left: 10px;
      display: flex;
      width: 30px;
      height: 30px;
      background: #ffffff;
      border-radius: 5px;
    }

    .check-in {
      margin-left: 10px;
      background: #e3e3e3;
      border-radius: 5px;
      padding: 7px 10px;
      color: #999999;
      font-size: small;
    }
  }
}

.action-item {
  width: calc(100% - 32px);
  margin: 0px 16px;
  height: 45px;
  line-height: 45px;
  font-size: small;
  border-bottom: 1px solid #dcd6d6;

  .name {
    margin-left: 10px;
  }
}

.logout-btn {
  width: 85%;
  margin: auto;
  margin-top: 50px;
}

.version-text {
  font-size: small;
  margin: auto;
  margin-top: 15px;
  margin-bottom: 30px;
}

.sign-layout {
  background: #4695f1;
  font-size: small;
  border-radius: 10px;
  padding: 10px;
  margin-right: 10px;
  height: fit-content;
}

.bottom-layout {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-top: -10px;
  z-index: 100;
  background: white;
}
</style>
